// 导入three.js模块
import * as THREE from "three";
// 导入轨道控制器所依赖文件
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入可视化控制工具
import * as dat from 'dat.gui'
// 1、创建一个场景
const scene = new THREE.Scene();
// 2、创建一个透视相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
// 设置相机的位置  添加到场景中
camera.position.set(0, 0, 10);

// 导入三维坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

/**
 * 添加几何物体
 */
// 创建几何物体
const geometry = new THREE.BufferGeometry();
// 创建点位
const vertices = new Float32Array([
  -1.0,-1.0,1.0,
  1.0,-1.0,1.0,
  1.0,1.0,1.0,
  1.0,1.0,1.0,
  -1.0,1.0,1.0,
  -1.0,-1.0,1.0
])
// 因为itemSize=3，所以每个顶点都是一个三元组
geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3))
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry,material)
console.log(mesh)

//将物体添加到场景
scene.add(mesh);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的内容添加到body中
document.body.appendChild(renderer.domElement);

// 创建一个控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true
// 使用渲染器，通过相机将场景渲染进来

// 初始化可视化工具
const gui = new dat.GUI()
// 添加属性
gui.add(mesh.position,'x').min(0).max(5).step(0.01).name('移动X轴')
// 添加修改颜色属性
const params = {
    color:"#00ff00",
}
gui.addColor(params,"color").onChange((value)=>{
    mesh.material.color.set(value)
    // console.log(value);
})




// 设置动画
// 平移
//  let animate1 = gsap.to(cube.position, {
//   x: 5,
//   duration: 5,
//   ease: "powerl.out",
//   // 设置重复次数,无限次就是-1
//   repeat: -1,
//   //   设置往返循环
//   yoyo: true,
//   onStart: () => {
//     console.log("动画开始了！");
//   },
//   onComplete: () => {
//     console.log("动画结束了！");
//   },
// });
// // 旋转
// gsap.to(cube.rotation, {
//   x: 2 * Math.PI,
//   duration: 5,
//   ease: "powerl.inOut",
//   repeat: -1,
// });

//双击屏幕暂停与开始动画
window.addEventListener('dblclick',()=>{
    // animate1.pause()
    // 判断是否有动画
    controls.update()
    // if(animate1.isActive()){
    //     animate1.pause()//暂停
    //     console.log('暂停');
    // }else{
    //     animate1.resume()//恢复
    //     console.log('恢复');

    // }
})
function animate() {
  renderer.render(scene, camera);
  // 渲染下一帧的时候就会调用animate函数
  requestAnimationFrame(animate);
}

// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
    // 更新摄像头
    camera.aspect = window.innerWidth/window.innerHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix();
    // 更新渲染器
    renderer.setSize(window.innerWidth,window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio)
})
animate();

